<template>
	<div class="m-song-lrc f-pr">
		<div class="m-song-scroll" style="height: 56px;"v-if="lyricCon">
			<div class="m-song-iner" v-for="item in lyricCon" >
				<p class="m-song-lritem j-lritem">{{item.txt}}</p>
			</div>
		</div>
		<div class="m-song-scroll" style="height: 56px;" v-else>
			<div class="m-song-iner">
				<p class="m-song-lritem j-lritem">纯音乐，无歌词</p>
			</div>
		</div>
	</div>
</template>

<script>
	import api from '.././api/index.js'
	import Lyric from 'lyric-parser'
	export default {
		mounted() {
			this._initData()
		},
		data() {
			return {
				list:[],
				lyricCon: "",
			}
		},
		methods: {
			_initData() {
				return new Promise((resolve, reject) => {
					var xhr = new XMLHttpRequest();
					xhr.open("GET", api.lyric + "?id=" + this.$route.params.id); 
					xhr.send();
					xhr.addEventListener("readystatechange", function() {
						if(xhr.readyState == 4) {
							if(xhr.status == 200) {
								resolve(xhr.response);
							}
						}
					})
				}).then((res) => {
					this.list = JSON.parse(res).lrc
					this.lyricCon = new Lyric(this.list.lyric).lines
					this.test()
				})
			},
			test(){
				this.$emit("tab",this.lyricCon)
			}
		}
	}
</script>

<style>

</style>